<div class="admin">
  <button
    *ngIf="!isSelfDevelop"
    nz-button
    nzType="primary"
    (click)="handleSync()"
    [nzLoading]="syncLoading"
  >
    {{ $t('_save') }}
  </button>
  <button
    *ngIf="!isSelfDevelop"
    nz-button
    style="margin: 0 15px 20px 15px"
    (click)="handleReset()"
  >
    {{ $t('_resetInitData') }}
  </button>
  <button nz-button (click)="handleDownloadBackup()" style="margin-right: 15px">
    {{ $t('_backup') }}
  </button>

  <label
    id="file2"
    nz-button
    nz-tooltip
    nzTooltipPlacement="bottom"
    [nzTooltipTitle]="$t('_importBackupTip')"
  >
    {{ $t('_importBackup') }}
    <input
      type="file"
      name="file2"
      (change)="handleUploadBackup($event)"
      accept=".json"
      class="file-upload"
    />
  </label>

  <div class="tip2">
    {{ $t('_errCountTip', { count: settings.errorUrlCount || 0 }) }}
  </div>

  <nz-tabset
    *ngIf="isLogin"
    [nzSelectedIndex]="tabActive"
    (nzSelectedIndexChange)="onTabChange($event)"
  >
    <nz-tab [nzTitle]="$t('_mgr1')">
      <button nz-button nzType="primary" (click)="toggleCreateModal()">
        {{ $t('_addTag') }}
      </button>
      <button
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(1)"
        nz-button
        nzDanger
        class="ml-2.5"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="websiteList"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onAllChecked($event, 1)"
            ></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_tagName') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of websiteList; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.title)"
              (nzCheckedChange)="onItemChecked(data.title, $event)"
            ></td>
            <td>
              <app-logo [src]="data.icon || ''" [name]="data.title" />
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td class="select-none">
              <a (click)="moveOneUp(idx)">{{ $t('_moveUp') }}</a>
              <a (click)="moveOneDown(idx)" class="ml-2.5">{{
                $t('_moveDown')
              }}</a>
              <a (click)="handleEditBtn(data, idx)" class="ml-2.5">{{
                $t('_edit')
              }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_delWarn')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelOne(idx)"
                class="color-red ml-2.5"
              >
                {{ $t('_del') }}
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgr2')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 260px"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateModal()"
        style="margin-left: 20px"
      >
        {{ $t('_addTag') }}
      </button>
      <button
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(2)"
        nz-button
        nzDanger
        class="ml-2.5"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="twoTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onAllChecked($event, 2)"
            ></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_tagName') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of twoTableData; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.title || '')"
              (nzCheckedChange)="onItemChecked(data.title, $event)"
            ></td>
            <td>
              <app-logo [src]="data.icon || ''" [name]="data.title || ''" />
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td class="select-none">
              <a (click)="moveTwoUp(idx)">{{ $t('_moveUp') }}</a>
              <a (click)="moveTwoDown(idx)" class="ml-2.5">{{
                $t('_moveDown')
              }}</a>
              <a (click)="handleEditBtn(data, idx)" class="ml-2.5">{{
                $t('_edit')
              }}</a>
              <a (click)="openMoveWebModal(data, idx, 2)" class="ml-2.5">{{
                $t('_move')
              }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_delWarn')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelTwo(idx)"
                class="color-red ml-2.5"
              >
                {{ $t('_del') }}
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgr3')">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 200px"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel2')"
        (ngModelChange)="hanldeTwoSelect($event)"
        style="width: 200px; margin-left: 15px"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title || ''"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="toggleCreateModal()"
        style="margin-left: 20px"
      >
        {{ $t('_addTag') }}
      </button>
      <button
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(3)"
        nz-button
        nzDanger
        class="ml-2.5"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="threeTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onAllChecked($event, 3)"
            ></th>
            <th>{{ $t('_icon') }}</th>
            <th>{{ $t('_tagName') }}</th>
            <th>{{ $t('_onlyOwnVisible') }}</th>
            <th>{{ $t('_createAt') }}</th>
            <th>{{ $t('_action') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of threeTableData; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.title || '')"
              (nzCheckedChange)="onItemChecked(data.title, $event)"
            ></td>
            <td>
              <app-logo [src]="data.icon || ''" [name]="data.title || ''" />
            </td>
            <td>{{ data.title }}</td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
            <td>{{ data.createdAt }}</td>
            <td class="select-none">
              <a (click)="moveThreeUp(idx)">{{ $t('_moveUp') }}</a>
              <a (click)="moveThreeDown(idx)" class="ml-2.5">{{
                $t('_moveDown')
              }}</a>
              <a (click)="handleEditBtn(data, idx)" class="ml-2.5">{{
                $t('_edit')
              }}</a>
              <a (click)="openMoveWebModal(data, idx, 3)" class="ml-2.5">{{
                $t('_move')
              }}</a>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_delWarn')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelThree(idx)"
                class="color-red ml-2.5"
              >
                {{ $t('_del') }}
              </a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>

    <nz-tab [nzTitle]="$t('_mgrWeb') + '（' + internal.loginViewCount + '）'">
      <nz-select
        [ngModel]="oneSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel1')"
        (ngModelChange)="hanldeOneSelect($event)"
        style="width: 150px"
      >
        <nz-option
          *ngFor="let item of websiteList"
          [nzLabel]="item.title"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="twoSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel2')"
        (ngModelChange)="hanldeTwoSelect($event)"
        style="width: 150px; margin-left: 15px"
      >
        <nz-option
          *ngFor="let item of twoTableData"
          [nzLabel]="item.title || ''"
          [nzValue]="item.title"
        >
        </nz-option>
      </nz-select>

      <nz-select
        [ngModel]="threeSelect"
        nzShowSearch
        [nzPlaceHolder]="$t('_sel3')"
        (ngModelChange)="hanldeThreeSelect($event)"
        style="width: 150px; margin-left: 15px"
      >
        <nz-option
          *ngFor="let item of threeTableData"
          [nzLabel]="item.title || ''"
          [nzValue]="item.title || ''"
        >
        </nz-option>
      </nz-select>

      <button
        nz-button
        nzType="primary"
        (click)="openCreateWebModal()"
        style="margin-left: 20px"
      >
        {{ $t('_addWeb') }}（{{ websiteTableData.length }}）
      </button>
      <button
        nz-button
        nzType="primary"
        (click)="getAllErrorWeb()"
        style="margin-left: 20px"
      >
        {{ $t('_getErrorWeb') }}
      </button>
      <button
        nz-popconfirm
        [nzPopconfirmTitle]="$t('_confirmDel')"
        nzPopconfirmPlacement="bottom"
        (nzOnConfirm)="onBatchDelete(4)"
        nz-button
        nzDanger
        class="ml-2.5"
        [disabled]="setOfCheckedId.size <= 0"
      >
        {{ $t('_batchDel') }}
      </button>

      <nz-table
        #rowSelectionTable
        #basicTable
        [nzData]="websiteTableData"
        [nzShowPagination]="false"
        style="margin-top: 15px"
      >
        <thead>
          <tr>
            <th
              nzWidth="70px"
              [nzChecked]="checkedAll"
              (nzCheckedChange)="onAllChecked($event, 4)"
            ></th>
            <th nzWidth="60px" class="text-center">{{ $t('_action') }}</th>
            <th nzWidth="70px">{{ $t('_status') }}</th>
            <th nzWidth="80px">{{ $t('_icon') }}</th>
            <th nzWidth="100px">{{ $t('_webName') }}</th>
            <th nzWidth="100px">{{ $t('_associatedLabels') }}</th>
            <th nzWidth="120px">{{ $t('_onlyOwnVisible') }}</th>
            <th nzWidth="300px">{{ $t('_webDesc') }}</th>
            <th nzWidth="300px">{{ $t('_webTag') }}</th>
            <th>{{ $t('_createAt') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of websiteTableData; let idx = index">
            <td
              [nzChecked]="setOfCheckedId.has(data.name)"
              (nzCheckedChange)="onItemChecked(data.name, $event)"
            ></td>
            <td class="text-center select-none">
              <div *ngIf="errorWebs.length <= 0">
                <a (click)="moveWebUp(idx)">{{ $t('_moveUp') }}</a>
              </div>
              <div *ngIf="errorWebs.length <= 0">
                <a (click)="moveWebDown(idx)">{{ $t('_moveDown') }}</a>
              </div>
              <a (click)="openEditModal(data)">{{ $t('_edit') }}</a>
              <div *ngIf="errorWebs.length <= 0">
                <a (click)="openMoveWebModal(data, idx)">{{ $t('_move') }}</a>
              </div>
              <a
                nz-popconfirm
                [nzPopconfirmTitle]="$t('_confirmDel')"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="handleConfirmDelWebsite(data, idx)"
                class="color-red"
              >
                {{ $t('_del') }}
              </a>
            </td>
            <td>
              <span
                *ngIf="data.ok === false"
                nz-icon
                nzType="close"
                nzTheme="outline"
                style="color: red"
              ></span>
            </td>
            <td>
              <app-logo
                *ngIf="data.icon"
                [src]="data.icon"
                [name]="data.name"
              />
            </td>
            <td>
              <a [href]="data.url" target="_blank">{{ data.name }}</a>
            </td>
            <td>
              <tag-list [data]="data.tags" *ngIf="data.tags" />
            </td>
            <td>
              <i
                *ngIf="data.ownVisible"
                nz-icon
                nzType="check"
                nzTheme="outline"
              ></i>
            </td>
            <td>
              <pre class="desc">{{ data.desc }}</pre>
            </td>
            <th nzWidth="300px">{{ data.breadcrumb }}</th>
            <td>{{ data.createdAt }}</td>
          </tr>
        </tbody>
      </nz-table>
    </nz-tab>
  </nz-tabset>
</div>

<edit-category
  (onOk)="handleOk($event)"
  [title]="isEdit ? $t('_edit') : $t('_add')"
/>
